<template>
  <el-dialog :append-to-body="true" :close-on-click-modal="false" :before-close="cancel" :visible.sync="dialog"
    title="用户关联商品" width="800px">
    <el-card>
      <div slot="header">
        <span>当前用户：{{ form.username }}</span>
      </div>
      <div>
        <el-transfer filterable :filter-method="filterMethod" filter-placeholder="请输入直营商品名称" v-model="value" :data="data" :titles="['平台自营商品列表', '已关联商品列表']">
        </el-transfer>
      </div>
    </el-card>
    <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="cancel">取消</el-button>
        <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getStoreProduct, userProductApi, getUserProduct } from '@/api/yxUser'
export default {
  props: {},
  data() {
    return {
      loading: false,
      dialog: false,
      form: {
        id: '',
        username: ''
      },
      // [{label: ``, key: ``}]
      data: [],
      value: [],
      filterMethod(query, item) {
        return item.label.indexOf(query) > -1;
      }
    }
  },
  methods: {
    cancel() {
      this.data = []
      this.value = []
      this.dialog = false
    },
    loadData() {
      getUserProduct({
        userId: this.form.id
      }).then(arr => {
        console.log(arr)
        this.value = arr


        getStoreProduct().then(res => {
          const content = res.content
          let arr = []
          content.forEach(element => {
            if (arr.indexOf(element.id) === -1) {
              arr.push({
                label: element.storeName,
                key: element.id
              })
            }
          });
          this.data = arr
        })
      })
    },
    doSubmit() {
      console.log(this.value)
      userProductApi({
        userId: this.form.id,
        productId: this.value.join(',')
      }).then(res => {
        this.$notify({
          title: '成功关联直营',
          type: 'success',
          duration: 1500
        })
        this.cancel()
      })
    }
    // spread(id) { }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-transfer-panel {
  width: 250px;
}
</style>
